<template>
  <div class="announcement-detail-container">
    <div class="back-section">
      <el-button @click="goBack" class="back-button" text type="primary">
        <el-icon>
          <ArrowLeft />
        </el-icon>
        <span>返回公告栏</span>
      </el-button>
    </div>

    <div v-loading="loading" class="detail-content">
      <div v-if="announcement" class="content-container">
        <div class="announcement-meta">
          <div class="announcement-meta-top">
            <span class="announcement-tag" :class="getTagClass(announcement)">
              {{ getTagText(announcement) }}
            </span>
            <span class="announcement-date">发布于: {{ formatDate(announcement.publishTime) }}</span>
          </div>

          <h1 class="announcement-title">{{ announcement.title }}</h1>

          <div class="publisher-info">
            <el-avatar :size="36" :icon="User" :src="announcement.publisherAvatar" class="publisher-avatar" />
            <div class="publisher-details">
              <div class="publisher-name">{{ announcement.publisherName }}</div>
              <div class="publisher-role">管理员</div>
            </div>
          </div>
        </div>

        <div class="content-divider"></div>

        <div class="announcement-body">
          <div class="announcement-content" v-html="formatContent(announcement.content)"></div>

          <div v-if="announcement.updateTime" class="updated-info">
            <el-icon>
              <EditPen />
            </el-icon>
            <span>最后更新于 {{ formatDate(announcement.updateTime, true) }}</span>
          </div>
        </div>
      </div>

      <el-empty v-else-if="!loading" description="未找到公告" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft, EditPen, User } from '@element-plus/icons-vue'
import { getAnnouncementById } from '@/api/announcement'

const router = useRouter()
const route = useRoute()
const announcement = ref(null)
const loading = ref(false)

// 获取公告详情
const fetchAnnouncementDetail = async () => {
  const id = route.params.id
  if (!id) {
    ElMessage.error('公告ID不能为空')
    return
  }

  loading.value = true
  try {
    const res = await getAnnouncementById(id)
    announcement.value = res.data
  } catch (error) {
    ElMessage.error('获取公告详情失败，请稍后重试')
  } finally {
    loading.value = false
  }
}

// 返回列表
const goBack = () => {
  router.push('/student/announcements')
}

// 格式化日期
const formatDate = (dateString, includeTime = false) => {
  if (!dateString) return '-'
  const date = new Date(dateString)

  if (includeTime) {
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
      hour: '2-digit',
      minute: '2-digit'
    })
  } else {
    return date.toLocaleString('zh-CN', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    })
  }
}

// 格式化内容
const formatContent = (content) => {
  if (!content) return ''
  // 将换行符转换为HTML换行标签
  return content.replace(/\n/g, '<br>')
}

// 获取标签类名
const getTagClass = (announcement) => {
  // 这里根据公告的属性或日期来确定标签类型
  const publishDate = new Date(announcement.publishTime)
  const now = new Date()
  const diffDays = Math.floor((now - publishDate) / (1000 * 60 * 60 * 24))

  if (diffDays < 3) return 'tag-new' // 最近3天发布的
  if (diffDays < 7) return 'tag-recent' // 最近一周发布的
  return 'tag-normal' // 一周前发布的
}

// 获取标签文本
const getTagText = (announcement) => {
  const tagClass = getTagClass(announcement)
  switch (tagClass) {
    case 'tag-new': return '新公告'
    case 'tag-recent': return '近期公告'
    default: return '公告'
  }
}

// 初始化
onMounted(() => {
  fetchAnnouncementDetail()
})
</script>

<style scoped>
.announcement-detail-container {
  padding: 30px;
  min-height: 100vh;
  background-color: #f9fafc;
}

.back-section {
  margin-bottom: 24px;
}

.back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  transition: gap 0.2s ease;
  padding: 0;
  height: auto;
}

.back-button:hover {
  gap: 10px;
}

.detail-content {
  position: relative;
  min-height: 200px;
}

.content-container {
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  max-width: 900px;
  margin: 0 auto;
}

.announcement-meta {
  padding: 32px 40px;
}

.announcement-meta-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.announcement-tag {
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  letter-spacing: 0.5px;
}

.tag-new {
  background: linear-gradient(135deg, #409EFF, #337ecc);
}

.tag-recent {
  background: linear-gradient(135deg, #66b1ff, #409EFF);
}

.tag-normal {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
}

.announcement-date {
  font-size: 14px;
  color: #6b7280;
}

.announcement-title {
  font-size: 28px;
  font-weight: 700;
  color: #111827;
  margin: 0 0 24px 0;
  line-height: 1.3;
}

.publisher-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.publisher-avatar {
  background-color: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.publisher-details {
  display: flex;
  flex-direction: column;
}

.publisher-name {
  font-size: 15px;
  font-weight: 500;
  color: #111827;
}

.publisher-role {
  font-size: 12px;
  color: #6b7280;
}

.content-divider {
  height: 1px;
  background-color: #e5e7eb;
}

.announcement-body {
  padding: 32px 40px;
}

.announcement-content {
  font-size: 16px;
  line-height: 1.8;
  color: #374151;
  margin-bottom: 32px;
  word-break: break-word;
}

.announcement-content :deep(p),
.announcement-content :deep(div) {
  margin-bottom: 16px;
}

.updated-info {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6b7280;
  font-size: 14px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
}

@media (max-width: 768px) {
  .announcement-detail-container {
    padding: 20px;
  }

  .announcement-meta,
  .announcement-body {
    padding: 24px 20px;
  }

  .announcement-title {
    font-size: 24px;
  }

  .announcement-meta-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}
</style>